<template>
  <view class="flex-col page">
	<view v-if="productList.length!=0" class="flex-row items-center section_3">
	<view>

	  <uni-swipe-action-item class="list" v-for="(item, index) in productList" :key="index" :right-options="options" @click="onClick(item)" @change="swipeChange(index)">
	    <view class="list_line"></view>
		<view class="flex-row">
	      <image class="image_5" src="../../static/images/touxiang.png" />
			<view class="text">
				<view class="text_title">共享给用户*******{{item.account_sharingequip.slice(7)}}</view>
				<view class="text_note">设备{{item.name_equip}}于{{dateFormat(item.time_sharingequip)}}共享</view>
			</view>
	    </view>
		<view class="list_line"></view>
	  </uni-swipe-action-item>
	</view>

	</view>
	
	
	<view v-else class="flex-col items-center flex-auto group_2 space-y-28">
		<image class="image_6" src="../../static/images/3df4f07884a8ad9ee9c75f6b2f977539.png" /> 
		<text class="font_2 text_5">没有共享设备给用户</text>
	</view>
	
	<view class="flex-col items-center button fixed-bottom">
	  <image class="image_7" src="../../static/images/b6902d6f4308bf267c7b11f0b4adfaac.png" @click="clicklistitem()"/>
	  <text class="font_2 text_6" @click="clicklistitem()">添加共享</text>
	</view>
  </view>
</template>

<script>
  import uniList from "@/uni_modules/uni-list/components/uni-list/uni-list.vue"
  import uniListItem from "@/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue"
  //（绑定人）可查看该设备共享给了其他哪些用户
  import {_otheruser} from "@/service/sharingequip.js"
  //取消某个设备的某个共享(绑定人和被共享人均可操作)
  import {_deletesharingequips} from "@/service/sharingequip.js"

  export default {
    components: {uniList,uniListItem},
    data() {
      return {
		  serialnum:'',
		  name:'',
		  productList:[],
		  options: [{
		  			isImage: true,
		  			src: '../../static/images/delete.png',
		  			style: {
		  				backgroundColor: '#5F9EA0',
		  				imgWidth: '64rpx',
		  				imgHeight: '72rpx'
		  		}
		  	}],
		  account:'',
		  
		  showOptions: -1, // 默认没有选项按钮显示
	  };
    },
	created(){
		this.getsharingData();
	},
	
	onShow() {
		try {
			const value = uni.getStorageSync('sharingequip1');
			if (value) {
				console.log(value)
				this.serialnum=value.serialnum_equip;
				this.name = value.name_equip;
			}
		} catch (e) {
			console.error(e);
		}
	},

    methods: {
		dateFormat(registertime) {
		    let date = new Date(registertime);
		    let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			let hours = date.getHours();
			let minutes = date.getMinutes();
			let seconds = date.getSeconds();
		    return year + "/" + month + "/" + day+"  "+hours+":"+minutes;
		},
		// 跳转链接
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		
		async getsharingData(){
			let data = {
				serialnum_sharingequip:this.serialnum
			}
			let res = await _otheruser(data);
			this.productList=res.data;
			console.log(this.productList);
		},
		
		clicklistitem(data){
			// console.log(this.name);
			console.log(data);
			uni.setStorage({
				key: 'sharingequip2',  
				data: {
					name:this.name,
					serialnum:this.serialnum
				}
				// data:data
			});
			this.navTo('/pages/sharingothers/sharingothers')
		},
		async delete(account){
			let data = {
				serialnum_sharingequip:this.serialnum,
				account_sharingequip:account
			}
			let res = await _deletesharingequips(data);
			console.log(res.data);
			this.getsharingData();
			uni.navigateBack();
		},
		onClick(data){
			uni.showModal({
				content:'是否取消此共享',
				showCancel:true,
				cancelText:'取消',
				confirmText:'确定',
				success:(res)=>{
					if(res.confirm){
						this.delete(data.account_sharingequip);
					}else if(res.cancel){
						console.log('用户点击取消')
					}
				}
			})
		},
		swipeChange(index){
			if (index !== this.showOptions) {
				// 如果选中的项不是当前已显示选项的项，则隐藏之前的选项
				this.showOptions = -1;
			}
		}
	},
  };
</script>

<style scoped lang="scss">
  .page {
    background-color: #ffffff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  // 添加width属性
  .section_3 {
    width: 100%;
    padding: 62.5rpx 8.33rpx 62.5rpx 29.17rpx;
  }
    
  .group_2 {
    padding: 429.17rpx 0 333.33rpx;
    overflow-y: auto;
  }
  .image_6 {
    width: 154.17rpx;
    height: 147.92rpx;
  }
    
  .text_5 {
    color: #a6a6a6;
  }
  .image_7 {
    width: 54.17rpx;
    height: 54.17rpx;
    margin-top: 35rpx;
  }
    
  .text_6 {
    color: #808080;
  }
  .image_5 {
    width: 60rpx;
    height: 60rpx;
    margin-right: 5%;
  }
    
  .font_2 {
    font-size: 31.25rpx;
    font-family: SourceHanSansCN;
    line-height: 29.17rpx;
  }
  
  // 添加width属性
  .flex-row {
    display: flex;
    align-items: center; //居中对齐
    width: 100%;
  }

  .fixed-bottom {
    position: fixed;
    bottom: 3%;
    left: 41%;
  }
  .text_title {
    font-size: 32rpx;
  }
 .text_note {
  max-width: 550rpx;
  font-size: 26rpx;
  color: #a6a6a6;
  margin-top: 2%;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
  }
  .list{
	margin-top: -5.9%;
	width: 650rpx;
	margin-left: 5%;
  }
  .list_line{
	margin-left: -2%;
	margin-top: 3%;
	height: 0.1px;
	background-color: #ccc;
	opacity: 0.35;
	margin-bottom: 3%;
  }
</style>